<template>
    <!--  <div
    class="w750 gray-body scrollable"
    :class="[(Nomsg ? 'white-bg': '') ,themes.theme]"
    @scroll="onScroll"
    ref="w750"
  > -->
    <div class="w750 gray-body" :class="[Nomsg ? 'white-bg' : '', themes.theme]" ref="w750" >
        <template v-if="Nomsg == false">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="margin-top: 0">
                <template v-if="!loadFailed">
                    <!-- 头部 -->
                    <header>
                        <div class="header-box opacity" :class="{ scroll: isScroll }" :style="{ background: Nomsg ? themes.color : '' }">
                            <div class="header-category" @click="goCategory">
                                <span class="category-img">
                                    <img src="../../assets/images/category.png" alt />
                                </span>
                            </div>
                            <div class="header-search" @click="goSearch">
                                <div class="ser-input">搜索商品</div>
                                <!-- <input type="text" placeholder="搜索店铺或者商品" class=""> -->
                                <i class="ser-i"></i>
                            </div>
                            <div class="header-mes" @click="goMessage">
                                <span class="mes-img">
                                    <img src="../../assets/images/message.png" alt />
                                </span>
                            </div>
                        </div>
                    </header>
                    <!-- /头部 -->
                    <template v-if="floorArr && floorArr.length">
                        <div class="index">
                            <!-- 楼层装修 -->
                            <div class="floor" v-for="(floors, index) in floorArr" :key="index">
                                <!-- 轮播图 -->
                                <template v-if="floors.type == 'slider'">
                                    <div class="banner" v-if="floors.photos && floors.photos.length">
                                        <slider :floors="floors"></slider>
                                    </div>
                                </template>
                                <!-- 轮播图 end-->

                                <!-- 图文导航 -->
                                <template v-if="floors.type == 'navigation'">
                                    <navigation :floors="floors"></navigation>
                                </template>
                                <!-- 图文导航 -->

                                <!-- 标题组件 -->
                                <template v-if="floors.type == 'title'">
                                    <ls-title :floors="floors"></ls-title>
                                </template>
                                <!-- 标题组件 end -->

                                <!-- 魔方 -->
                                <template v-if="floors.type == 'cube'">
                                    <cube :floors="floors"></cube>
                                </template>
                                <!-- 魔方 end -->

                                <!-- 商品列表 -->
                                <template v-if="floors.type == 'prodList'">
                                    <prod-list :floors="floors" :key="index" :scrollTop="scrollTop"></prod-list>
                                </template>
                                <!-- 商品列表 end-->

                                <!-- 辅助空白 -->
                                <template v-if="floors.type == 'blank'">
                                    <blank :floors="floors"></blank>
                                </template>
                                <!-- 辅助空白 end -->

                                <!-- 辅助线 -->
                                <template v-if="floors.type == 'subline'">
                                    <subline :floors="floors"></subline>
                                </template>

                                <!-- 辅助线 end -->

                                <!-- 富文本 -->
                                <template v-if="floors.type == 'richText'">
                                    <rich-text :floors="floors"></rich-text>
                                </template>
                                <!-- 富文本 -->
                            </div>
                            <!-- 楼层装修 -->
                        </div>
                    </template>
                </template>
                <template v-if="loadFailed">
                    <div class="reFresh">
                        <img src="../../assets/images/noLine.png" alt />
                        <p>网络请求失败</p>
                        <div>请检查网络后,下拉刷新重试</div>
                    </div>
                </template>
            </van-pull-refresh>
        </template>
	
        <Noempty :pic="require('../../assets/images/order-empty.png')" :title="'您暂无相关楼层装修'" v-if="Nomsg" />
		
        <!-- 广告位 -->
        <cowhide-advertising />
        <!-- 版权 -->
        <copyrightInfo />
		<!-- 联系方式 -->
		<contact v-if="indexDetail.floatWinSwitch" :src="indexDetail.picUrl" @click="$router.push({path: `/contactList`})" />
        <!-- 先用这个 -->
        <div style="height: 60px"></div>
    </div>
</template>

<script>
import slider from 'components/index/slider'
import navigation from 'components/index/navigation'
import lsTitle from 'components/index/lsTitle'
import cube from 'components/index/cube'
import prodList from 'components/index/prodList'
import blank from 'components/index/blank'
import subline from 'components/index/subline'
import richText from 'components/index/richText'
import Noempty from 'components/Noempty/Noempty'
import ProList from 'components/proList/proList'
import cowhideAdvertising from 'components/cowhideAdvertising/cowhideAdvertising'
import copyrightInfo from 'components/copyrightInfo/copyrightInfo'
import contact from 'components/contact/contact'
import { Swipe, SwipeItem } from 'vant'
import { mapState } from 'vuex'
import { ShoppingIndex, manuallySelectProducts, shopCategoryProd, groupProd } from 'api/index'
import config from 'config/config'
import jumpMixin from 'mixin/jumpMixin.js'
import store from '../../store'
import weChat from '@/utils/weChat'
export default {
    data() {
        return {
            floorArr: null, //楼层装修
            Nomsg: false,
            isLoading: false,
            loadFailed: false,
            isScroll: false,
            windowHeight: '', //可视区的高
            scrollTop: 0, //滚动高
			floatWinSwitch: false,
			indexDetail: ''
        }
    },
    activated() {
        window.addEventListener('scroll', this.onPageScroll)
    },
    mounted() {
        //获取商城首页数据
        this.getShoppingIndex()
        if (this.$route.query.qrCode) {
            sessionStorage.setItem('qrCode', this.$route.query.qrCode)
        }
		
    },
    deactivated() {
        // TODO 这个会影响重新进来首页时的搜索栏背景 暂时屏蔽
        // window.removeEventListener('scroll', this.onPageScroll)
    },
    async beforeRouteEnter(to, from, next) {
		// store.dispatch('waitTitle') 异步等待拿到门店标题
		let themes = await store.dispatch('waitTitle')
		next((vm) => {
		    vm.$nextTick(() => {
		        if (themes.shopName) {
		            to.meta.titleName = themes.shopName
		            to.meta.title = themes.shopName
		            document.title = themes.shopName
					// 配置微信分享
					weChat.share({
						title: themes.shopName,
						imgUrl: config.photoServer + themes.shopLogo
					})
		        }
		    })
		})

    },

    methods: {
        onPageScroll(e) {
            // 安卓微信内置浏览器不支持document.documentElement.scrollTop 所以用window.pageYOffset
            let scrollTop = document.documentElement.scrollTop||window.pageYOffset
            if (scrollTop >= 20) {
                this.isScroll=true
            } else {
                this.isScroll=false
            }
            this.scrollTop=scrollTop
        },
        //获取首页装修数据
        getShoppingIndex() {
            let that = this
            ShoppingIndex()
                .then((res) => {
                    if (res.status == 1) {
                        this.loadFailed = false
                        if (res.result) {
                            this.floorArr = res.result.components
							this.indexDetail = res.result
                        } else {
                            this.Nomsg = true
                        }
                    } else {
                        this.Nomsg = true
                        this.$toast(res.msg)
                    }
                })
                .catch((e) => {
                    this.loadFailed = true
                })
        },
        goCategory() {
            this.$router.push({
                path: `/category`
            })
        },
        goSearch() {
            this.$router.push({
                path: `/search`
            })
        },
        goMessage() {
            this.$router.push({
                path: `/message`
            })
        },

        onRefresh() {
            setTimeout(() => {
                this.$toast('刷新成功')
                this.isLoading = false
                this.getShoppingIndex()
                this.$store.dispatch('getBaseSetting')
            }, 500)
        },

        onScroll(event) {
            // console.debug(event);
            let target = event.target
            if (target.scrollTop >= 20) {
                this.isScroll = true
            } else {
                this.isScroll = false
            }
            this.scrollTop = target.scrollTop
            // this.loadData(this.floorArr);
        }
    },
    components: {
        ProList,
        Noempty,
        slider,
        navigation,
        lsTitle,
        cube,
        prodList,
        blank,
        subline,
        richText,
        cowhideAdvertising,
        copyrightInfo,
		contact
    },
    computed: {
        ...mapState(['themes']),
        ...mapState(['bottomColumn'])
    }
}
</script>

<style src="../../assets/css/index.css" scoped></style>
<style scoped>
.van-swipe-item img {
    width: 100%;
    height: 100%;
}
.van-swipe__indicators {
    bottom: 25px !important;
}
.van-swipe__indicators .van-swipe__indicator {
    width: 8px !important;
    height: 8px !important;
}
.van-pull-refresh {
    min-height: 100%;
}
</style>
<style scoped lang="stylus">
.reFresh {
  width: 100%;
  height: 100%;
  margin: 100px auto;
  text-align: center;

  img {
    width: 100px;
    height: 100px;
  }
}
</style>
<style lang="stylus">
#commCotent4 {
  width: 100%;

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  a {
    width: 100% !important;
  }

  div {
    width: 100% !important;
  }

  ul {
    width: 100% !important;
  }

  li {
    width: 100% !important;
  }
}

.scrollable {
  overflow: scroll;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-overflow-scrolling: touch;
}
</style>

<style scoped>
header + div {
    margin-top: 0px;
}
</style>
